<template>
    <div class="left">
        <h1>请填写发动机相关信息：</h1>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <!-- <i slot="default" class="picture-outline"></i> -->
            <div class="imgbg" 
                ref="img" ></div>
            <div class="a" ref="a">拖入/选择 需要评估的发动机图片</div>
            <div class="b">支持格式：JPEG、PNG    文档大小 &lt; 5MB </div>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" height="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false
        };
    },
    methods: {
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        // imgEnter(){
        //     this.$refs['img'].style.backgroundImage="url(../../assets/图片添加_activity.png)";
        // },
        // imgLeave(){
        //     this.$refs['img'].style.backgroundImage="url(../../assets/图片添加.png)";
        // }
    }
}
</script>

<style>
.left{
    position: relative;
    top: 20px;
}

.el-upload--picture-card{
    width: 800px;
    height: 600px;
}

.imgbg{
    position: relative;
    top: 180px;
    left: 40%;
    width: 120px;
    height: 120px;
    background-image: url(../../assets/图片添加.png);
}

.a{
    position: relative;
    height: 20px;
    font-size: 20px;
    top:150px;
}
.b{
    position: relative;
    top:170px;
    height: 20px;
    font-size: 20px;
    margin-top: 10px;
}
.picture-outline{
    margin-top: 50px;
    width: 50px;
}
.sava-txt{
    font-size: 50px;
}

</style>